<template>
  <s-page custom-class="Tabs-Page">
    <c-demo-block title="基础使用">
      <s-tabs v-model="index1" :list="list1" />
    </c-demo-block>

    <c-demo-block title="使用粘性组件">
      <s-sticky :scroll-top="scrollTop">
        <s-tabs v-model="index2" :list="list1" border />
      </s-sticky>
    </c-demo-block>

    <c-demo-block title="通过value匹配">
      <s-tabs v-model="value" :list="list1" value-key="value" />
    </c-demo-block>

    <c-demo-block title="字符串数据">
      <s-tabs v-model="index3" :list="strList" />
    </c-demo-block>

    <c-demo-block title="隐藏底部条">
      <s-tabs v-model="index4" :show-line="false" :list="strList" />
    </c-demo-block>

    <c-demo-block title="底部条样式">
      <s-tabs
        v-model="index5"
        line-position="center"
        line-width="90%"
        line-height="80%"
        line-color="rgb(232, 245, 255)"
        line-radius="999"
        :list="strList"
      />
    </c-demo-block>

    <c-demo-block title="多个滚动">
      <s-tabs v-model="index6" :list="list2" custom-class="scroll-tabs" />
    </c-demo-block>

    <c-demo-block title="禁用标签">
      <s-tabs v-model="index7" :list="list3" />
    </c-demo-block>

    <c-demo-block title="切换拦截">
      <s-tabs :value="index8" :list="list1" @change="onChange" />
    </c-demo-block>

    <c-demo-block title="角标">
      <s-tabs v-model="index9" :list="badgeList" />
    </c-demo-block>

    <!-- #ifndef MP-TOUTIAO -->
    <c-demo-block title="插槽">
      <s-tabs v-model="index10" :list="list2" :show-line="false">
        <template #default="{ item }">
          <view style="padding: 16rpx; border: 2rpx solid #aaa">{{ item.label }}</view>
        </template>
      </s-tabs>
    </c-demo-block>
    <!-- #endif -->
  </s-page>
</template>

<script>
export default {
  data() {
    return {
      scrollTop: 0,
      index1: 1,
      index2: 1,
      index3: 1,
      index4: 1,
      index5: 1,
      index6: 1,
      index7: 0,
      index8: 1,
      index9: 1,
      index10: 3,
      value: 2,
      strList: ['Tab1', 'Tab2', 'Tab3', 'Tab4'],
      list1: [
        { label: 'Tab1', value: 1 },
        { label: 'Tab2', value: 2 },
        { label: 'Tab3', value: 3 },
        { label: 'Tab4', value: 4 },
      ],
      list2: [
        { label: 'Tab1' },
        { label: 'Tab2' },
        { label: 'Tab3' },
        { label: 'Tab4' },
        { label: 'Tab5' },
        { label: 'Tab6' },
        { label: 'Tab7' },
        { label: 'Tab8' },
        { label: 'Tab9' },
        { label: 'Tab10' },
      ],
      list3: [
        { label: 'Tab1', value: 1 },
        { label: 'Tab2', value: 2, disabled: true },
        { label: 'Tab3', value: 3, disabled: true },
        { label: 'Tab4', value: 4 },
      ],
      badgeList: [
        { label: '关注', badge: { dot: true } },
        { label: '推荐', badge: { value: 9 } },
        { label: '电影', badge: { value: 100, max: 99 } },
      ],
    };
  },
  onPageScroll({ scrollTop }) {
    this.scrollTop = scrollTop;
  },
  methods: {
    onChange(index) {
      uni.showModal({
        title: '提示',
        content: '确定切换吗?',
        success: res => {
          if (res.confirm) {
            this.index8 = index;
          }
        },
      });
    },
  },
};
</script>

<style lang="scss">
.Tabs-Page {
  min-height: 130vh;
  ::v-deep {
    .c-demo-block {
      &__title {
        padding-left: $padding-md;
      }
    }
  }
}
</style>
